<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form
        ref="sysConfigForm"
        :model="sysConfigForm"
        :rules="rules"
        label-width="200px"
        class="demo-sysConfigForm"
        v-loading="loading"
      >

        <el-form-item prop="refundAddress">
          <template v-slot:label>
            <span>
            <span>退货地址：</span>
            <el-tooltip class="item" effect="dark" content="退货地址" placement="top-start">
              <i class="el-icon-warning-outline"/>
            </el-tooltip>
          </span>
          </template>

          <el-input
            v-model="sysConfigForm.refundAddress"
            placeholder="退货地址"
            class="selWidth"
          ></el-input>
        </el-form-item>
        <el-form-item prop="partnerBuyPrice">
          <template v-slot:label>
            <span>
            <span>合伙人购买金额：</span>
            <el-tooltip class="item" effect="dark" content="合伙人购买金额" placement="top-start">
              <i class="el-icon-warning-outline"/>
            </el-tooltip>
          </span>
          </template>

          <el-input-number
            v-model="sysConfigForm.partnerBuyPrice"
            :min="0.00"
            :precision="2"
            placeholder="合伙人购买金额"
            class="selWidth"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="partnerBuyRatio">
          <template v-slot:label>
            <span>
            <span>合伙人购买分佣比例(%)：</span>
            <el-tooltip class="item" effect="dark" content="合伙人购买分佣比例" placement="top-start">
              <i class="el-icon-warning-outline"/>
            </el-tooltip>
          </span>
          </template>

          <el-input-number
            v-model="sysConfigForm.partnerBuyRatio"
            :min="0"
            :max="100"
            placeholder="合伙人购买分佣比例"
            class="selWidth"
          ></el-input-number>
          %
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm('sysConfigForm')"
          >提交
          </el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {systemConfigApi, systemConfigUpdateApi} from '@/api/shopping/systemSetting';

export default {
  name: 'Index',
  data() {
    return {
      sysConfigForm: {},
      loading: true,
      rules: {
        refundAddress: [{required: true, message: '退货地址不能为空', trigger: 'change'}],
        partnerBuyPrice: [{required: true, message: '合伙人购买金额不能为空', trigger: 'change'}],
        partnerBuyRatio: [{required: true, message: '合伙人购买分佣比例不能为空', trigger: 'change'}],
      },
    };
  },
  mounted() {
    this.getDetal();
  },
  methods: {
    channelInputLimit(e) {
      let key = e.key;
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false;
        return false;
      }
      return true;
    },
    getDetal() {
      this.loading = true;
      systemConfigApi()
        .then((res) => {
          this.loading = false;
          this.sysConfigForm = res.data;
        })
        .catch((res) => {
          ElMessage.error(res.data.message);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          systemConfigUpdateApi(this.sysConfigForm)
            .then(() => {
              this.loading = false;
              ElMessage.success('提交成功');
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.selWidth {
  width: 300px;
}
</style>
